<template>
	<div class="headerBar">
		<div class="header-w">
			<div class="container">
				<div class="bar_left">
					<HeaderNav></HeaderNav>
				</div>
				<div class="bar_right">
					<ul class="nav" v-cloak>
						<!-- 新建 -->
						<li class="add item dropdown">
							<selfSelect label="新建" :list="create" @selected="createNote">
								<template v-slot="{item,index}">
									<a>
										<el-button type="text">{{item.label}}</el-button>
									</a>
								</template>
							</selfSelect>
						</li>
						<!-- 分类 -->
						<li class="categories item dropdown">
							<selfSelect label="全部" :list="categories">
								<template v-slot="{item,index}">
									<p @click="getTagItem(item)">
										<a>{{item.name}}</a>
										<span class="count">{{item.count}}</span>
									</p>
								</template>
							</selfSelect>
						</li>

						<!-- 排序 -->
						<li class="sort item dropdown">
							<selfSelect label="按标题排序" :list="sort" @selected="sortBy">
								<template v-slot="{item,index}">
									<a>{{item.label}}</a>
								</template>
							</selfSelect>
						</li>

						<!-- 搜索 -->
						<li class="search item">
							<input type="text" class="search_box form-control" v-model="params.title" @change="onsearch" placeholder="过滤标题" />
							<!-- 、内容、时间戳 -->
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import selfSelect from "@/components/SelfSelect.vue";
	import HeaderNav from "./HeaderNav";
	export default {
		name: "HeaderBar",
		components: {
			selfSelect,
			HeaderNav
		},
		computed: {

		},
		data() {
			return {
				create: [{
					label: "Markdown",
					value: "1"
				}, {
					label: "涂鸦",
					value: "2"
				}],
				categories: [],
				sort: [{
					label: "按标题排序",
					value: "title"
				}, {
					label: "按创建时间排序",
					value: "updatedAt"
				}],
				params: { // 获取 noteList 的参数
					orderby: "updatedAt", // 默认根据更新时间排序
					// pageSize: 8,
					// pageNum: 1,
					tagId: "", // 分类筛选
					title: "" ,// 搜索的 title
				}
			};
		},
		methods: {
			//新建
			createNote(e) {
				//console.log(e)
				this.$emit("createNote", e.item.value)
			},
			//根据Tag分组统计数量
			getTag() {
				this.$api.groupByTags({}).then(res => {
					var totalCount = 0;
					for (let i = 0; i < res.length; i++) {
						totalCount += res[i].count;
					}
					let categories = [{
						name: "全部",
						_id: "",
						count: totalCount
					}];
					categories = categories.concat(res);
					this.categories = categories;
				});
			},
			// 筛选
			getTagItem(item) {
				this.params.tagId = item._id;
				this.onsearch();
			},
			//排序
			sortBy(item) {
				//console.log(item)
				this.params.orderby = item.item.value;
				this.onsearch();
			},
			onsearch() {
				this.$emit("onsearch", this.params);
			}
		},
		mounted() {
			this.getTag();
		}
	};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.el-dialog {
		width: 400px;
	}

	.el-input {
		height: 100%;
	}

	.newnote_wrap {
		height: 360px !important;
	}

	.edit_layer {
		width: 300px;
		height: 318px;
		background-color: #fff;
		margin: 0 auto;
		padding: 10px;
		border: 1px solid #f8f8f8;
		border-radius: 3px;
		box-shadow: 0 0 6px 0 #42bd56;
		z-index: 3000;

		.editor_top {
			width: 100%;
			margin-bottom: 10px;
			position: relative;
			height: 34px;

			.editor_title {
				display: block;
				width: 120px;
				height: 34px;
				box-sizing: border-box;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.42857143;
				color: #555;
				background-color: #fff;
				border: 1px solid #ccc;
				border-radius: 4px;
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
				transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
				float: left;
			}

			.editor_title:focus {
				border-color: #66afe9;
				outline: 0;
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
					0 0 8px rgba(102, 175, 233, 0.6);
			}

			.select_category {
				width: 66px;
				height: 34px;
				line-height: 34px;
				margin-left: 10px;
				float: left;
				transition: all 0.2s ease-in-out;

				#select_menu {
					width: 100%;
					height: 100%;
					border: 1px solid #ccc;
					border-radius: 4px;
					background: #ccc;
				}
			}

			.tools {
				float: left;
				height: 20px;
				margin-top: 8px;

				li {
					width: 20px;
					height: 20px;
					float: left;
					margin-left: 10px;
					opacity: 0.5;
					transition: opacity 0.2s ease-in-out;
				}

				.save {
					background: url(../assets/icons/icon-save.png) no-repeat 0 0;
				}

				.cancel {
					background: url(../assets/icons/icon-cancel.png) no-repeat 0 0;
				}

				li:hover {
					opacity: 1;
					cursor: pointer;
				}
			}
		}

		.content {
			width: 100%;
			height: 272px;
		}

		.text_content {
			width: 272px;
			height: 262px;
			font-size: 12px;
			resize: none;
		}

		.form-control {
			border: 1px solid #ccc;
			border-radius: 4px;
			padding: 6px 12px;
			line-height: 1.4;
		}
	}
</style>
<style scoped lang="scss">
	.headerBar {
		height: 50px;

		.header-w {
			height: 50px;
			background: #f8f8f8;
			border-bottom: 1px solid #e7e7e7;
			position: fixed;
			right: 0;
			left: 0;
			top: 0;
			z-index: 200;

			.bar_left {
				float: left;
				margin: 0 15px;
				line-height: 50px;
				box-shadow: 0 1px 6px #eee;

				a {
					padding: 15px;
					line-height: 20px;
					font-size: 18px;
				}

				a:hover {
					background: rgb(231, 231, 231) !important;
					color: rgb(66, 189, 86);
				}
			}

			.bar_right {
				float: right;
				line-height: 50px;

				.nav {
					float: left;
					line-height: 50px;

					.item {
						float: left;
						position: relative;
						line-height: 50px;

						.search_box {
							width: calc(100% - 24px);
							margin: 9px 12px;
						}

						.form-control {
							display: block;
							width: 100%;
							padding: 6px 12px;
							font-size: 14px;
							line-height: 1.4;
							color: #555;
							background-color: #fff;
							border: 1px solid #ccc;
							border-radius: 4px;
							box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
							transition: border-color ease-in-out 0.15s,
								box-shadow ease-in-out 0.15s;
						}

						.form-control:focus {
							border-color: #66afe9;
							outline: 0;
							box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
								0 0 8px rgba(102, 175, 233, 0.6);
						}

						.count {
							/* display: inline-block; */
							min-width: 10px;
							padding: 3px 7px;
							font-size: 12px;
							font-weight: 700;
							line-height: 1;
							color: #fff;
							text-align: center;
							background-color: #777;
							border-radius: 5px;
							margin: 0 10px 0 60px;
						}
					}

					.item:hover {
						background: rgb(231, 231, 231) !important;
					}
				}
			}
		}
	}
</style>
